<script setup></script>

<template>
  <div>
    <el-card class="cardStyle" shadow="hover">
      <el-container>
        <el-main style="padding: 5px 0px">
          <el-row>
            <!-- 左边 -->
            <el-col :span="12">
              <div>
                <el-row style="margin-bottom: 10px">
                  <el-space>
                    <span> 物业环境主管 [东莞·大朗镇·松山湖] </span>
                  </el-space>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <div>
                      <span style="color: red; float: left">8-10K·13薪</span>
                    </div>
                  </el-col>
                  <el-col :span="18">
                    <el-space style="float: left">
                      <el-tag type="primary">经验不限</el-tag>
                      <el-tag type="primary">学历不限</el-tag>
                    </el-space>
                  </el-col>
                </el-row>
              </div>
            </el-col>
            <!-- 右边 -->
            <el-col :span="12">
              <el-container>
                <el-aside width="80px">
                  <img
                    style="width: 60px; height: 60px"
                    src="https://img.bosszhipin.com/beijin/upload/com/workfeel/20221129/7bf6f160950405e9b302933d5aad0760f52589a839fefe5bb53f0d8ab1c1e667e4818f653490b282.jpg?x-oss-process=image/resize,w_100,limit_0"
                    alt=""
                  />
                </el-aside>
                <el-main style="padding: 0">
                  <div>
                    <el-row style="margin-bottom: 10px">
                      <el-space>
                        <span>龙湖智慧服务</span>
                      </el-space>
                    </el-row>
                    <el-row>
                      <el-space style="float: left">
                        <el-tag type="primary">物业管理</el-tag>
                        <el-tag type="primary">已上市</el-tag>
                        <el-tag type="primary">10000人以上</el-tag>
                      </el-space>
                    </el-row>
                  </div>
                </el-main>
              </el-container>
            </el-col>
          </el-row>
        </el-main>
        <el-footer style="height: 20px; padding: 6px 0">
          <div>
            <el-row :gutter="20">
              <el-col :span="12">
                <div style="float: left">
                  <el-space :size="size" spacer="|" style="color: #c7cbca">
                    <span style="font-size: 14px">商业场所</span>
                    <span style="font-size: 14px">办公楼宇</span>
                    <span style="font-size: 14px">工业园区</span>
                  </el-space>
                </div>
              </el-col>
              <el-col :span="12">
                <div style="float: left">
                  <el-space :size="size" spacer="," style="color: #c7cbca">
                    <span style="font-size: 14px">节日福利</span>
                    <span style="font-size: 14px">加班补助</span>
                    <span style="font-size: 14px">定期体检</span>
                    <span style="font-size: 14px">年终奖</span>
                  </el-space>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-footer>
      </el-container>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.cardStyle {
  margin: 20px 50px;

  span {
    font-size: 16px;
  }
}
</style>
